<template>
  <div class="subject3">
    <div class="subject-wrapper-bg">
      <img
        src="http://qiniu.whxgjt.com/dfh2/img_tb02.png"
        alt=""
        class="subject-bg"
      />
      <p class="subject-title">第三题</p>
    </div>

    <div class="subject-wrapper">
      <div class="subject">{{ subject }}</div>
      <div
        v-for="(option, index) in options"
        :key="index"
        @click="handleItem(index)"
        class="option"
        :class="[
          option.checked && option.correct ? 'option-true' : '',
          option.checked && !option.correct ? 'option-false' : '',
        ]"
      >
        {{ option.content }}
      </div>
    </div>

    <div v-show="corrent == '2'" class="subject-error-bg">
      <div class="subject-error">
        <img
          src="http://qiniu.whxgjt.com/dfh2/img_jx.png"
          alt=""
          class="img-js"
        />
        <div class="current-content">
          <div class="current-title">答案：{{ currentAnswer.answer }}</div>
          <div class="currenr-text"></div>
        </div>
        <div class="again-wrapper">
          <img
            src="~@/assets/img/answer/btn_again.png"
            alt=""
            @click="handleAgain"
            class="btn-again"
          />
        </div>
      </div>
      <img src="http://qiniu.whxgjt.com/dfh2/ip_03.png" alt="" class="ip-03" />
    </div>

    <img
      src="http://qiniu.whxgjt.com/dfh2/ip_01.png"
      alt=""
      v-show="corrent == ''"
      class="ip-01"
    />
    <img
      src="http://qiniu.whxgjt.com/dfh2/ip_02.png"
      alt=""
      v-show="corrent == '1'"
      class="ip-02"
    />

    <!-- 正确遮罩 -->
    <div v-show="corrent == '1'" @touchmove.prevent class="mask">
      <div class="mask-content fadeInBottom">
        <img
          src="http://qiniu.whxgjt.com/dfh2/tq_03.png"
          alt=""
          class="mask-img"
        />
        <img
          src="~@/assets/img/answer/btn_xyt.png"
          alt=""
          @click="handleNext"
          class="btn-next"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from "@/utils/wxConfig";

export default {
  name: "Subject3",
  data() {
    return {
      corrent: "",
      subject: "东方红资产管理的品牌愿景是？(单选)",
      options: [
        {
          content: "A. 成为受人尊敬的资产管理机构",
          checked: false,
          correct: true,
        },
        {
          content: "B. 成为人见人爱的资产管理机构",
          checked: false,
          correct: false,
        },
        {
          content: "C. 成为花见花开的资产管理机构",
          checked: false,
          correct: false,
        },
      ],
      currentAnswer: {
        answer: "A",
        analysis: "",
      },
    };
  },
  methods: {
    handleItem(index) {
      this.options.map((item, i) => {
        if (index === i) {
          item.checked = true;
          this.corrent = item.correct ? "1" : "2";
        } else {
          item.checked = false;
        }
        return item;
      });
    },
    handleAgain() {
      this.corrent = "";
      this.options.map((item) => {
        item.checked = false;
        return item;
      });
    },
    handleNext() {
      this.$router.replace("/subject4");
    },
  },
  mounted() {
    WxShare();
  },
};
</script>

<style lang="scss" scoped>
.subject3 {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("http://qiniu.whxgjt.com/dfh2/bg_dt.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  position: relative;

  .subject-wrapper-bg {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 35px;
    .subject-bg {
      height: 396px;
    }
    .subject-title {
      width: 100%;
      margin: 11px 0 10px 12px;
      font-size: 20px;
      letter-spacing: 6px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #671d12;
      text-align: center;
      position: absolute;
      top: 0;
    }
  }

  .subject-error-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    .subject-error {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 417px;
      .img-js {
        height: 182px;
      }
      .current-content {
        width: 100%;
        padding: 0 40px;
        text-align: left;
        color: #b0612d;
        position: absolute;
        top: 40px;
        box-sizing: border-box;
        .current-title {
          font-size: 15px;
          font-family: SourceHanSansCN;
          font-weight: 500;
        }
        .currenr-text {
          padding-top: 5px;
          font-size: 13px;
          font-family: SourceHanSansCN;
          font-weight: 500;
        }
      }
      .again-wrapper {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 20px;
        .btn-again {
          height: 33px;
        }
      }
    }
  }

  .subject-wrapper {
    .subject {
      margin: 5px 0 15px 0;
      font-size: 16px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #b0612d;
      line-height: 24px;
    }
    .option-true {
      background-image: url("~@/assets/img/answer/btn_true.png");
    }

    .option-false {
      background-image: url("~@/assets/img/answer/btn_false.png");
    }
  }

  .ip-01 {
    width: 100%;
    height: 163px;
    position: fixed;
    bottom: 0;
  }
  .ip-02 {
    width: 100%;
    height: 160px;
    position: fixed;
    bottom: 0;
  }
}
</style>